<!DOCTYPE html>
<html>

	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<title>数据后台管理-产品管理</title>

		<!-- Tell the browser to be responsive to screen width -->
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

		<!-- 页面meta /-->

		<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="../plugins/iCheck/square/blue.css">
		<link rel="stylesheet" href="../plugins/morris/morris.css">
		<link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
		<link rel="stylesheet" href="../plugins/datepicker/datepicker3.css">
		<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
		<link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
		<link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css">
		<link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.css">
		<link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.theme.default.css">
		<link rel="stylesheet" href="../plugins/select2/select2.css">
		<link rel="stylesheet" href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
		<link rel="stylesheet" href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
		<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
		<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
		<link rel="stylesheet" href="../css/style.css">
		<link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.css">
		<link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
		<link rel="stylesheet" href="../plugins/bootstrap-slider/slider.css">
		<link rel="stylesheet" href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
	</head>

	<body class="hold-transition skin-purple sidebar-mini">
		<div id="app">
		<div class="wrapper">

			<!-- 页面头部 -->
			<div id="header"></div>
			<!-- 页面头部 /-->

			<!-- 导航侧栏 -->
			<div id="sidebar"></div>
			<!-- 导航侧栏 /-->

			<!-- 内容区域 -->
			<!-- @@master = admin-layout.html-->
			<!-- @@block = content -->

			<div class="content-wrapper">

				<!-- 内容头部 -->
				<section class="content-header">
					<h1>
						产品管理
						<small>产品表单</small>
					</h1>
					<ol class="breadcrumb">
						<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
						<li><a href="#">产品管理</a></li>
						<li class="active">修改产品</li>
					</ol>
				</section>
				<!-- 内容头部 /-->
				<form action="#" method="post">
					<!-- 正文区域 -->
					<section class="content">
						<!--label显示的内容-->
						<div class="panel panel-default" id="tab-label">
							<div class="panel-heading">产品信息</div>

							<div class="row data-type">

								<div class="col-md-2 title">产品编号</div>
								<div :class="{'col-md-4':true,data:true,text:true,'has-error':!product.productNum}">
									<input type="text" class="form-control" placeholder="产品编号" v-model="product.productNum" :readonly="readState?false:'readonly'">
								</div>
								<div class="col-md-2 title">产品名称</div>
								<div class="col-md-4 data text">
									<input type="text" class="form-control" placeholder="产品名称" v-model="product.productName" :readonly="readState?false:'readonly'">
								</div>
								<div class="col-md-2 title">出发时间</div>
								<div class="col-md-4 data text" >
									<div class="input-group date" >
										<div class="input-group-addon">
											<i class="fa fa-calendar"></i>
										</div>
										<div :class="{'has-error':!product.departureTime}" >
											<input type="text" class="form-control pull-right" v-show="readState" id="dateTimePicker" v-model="product.departureTime" >
											<input type="text" class="form-control pull-right" v-show="!readState"  v-model="product.departureTime" readonly>
										</div>

									</div>
								</div>

								<div class="col-md-2 title">出发城市</div>
								<div class="col-md-4 data text">
									<input type="text" class="form-control" placeholder="出发城市" v-model="product.cityName" :readonly="readState?false:'readonly'">
								</div>

								<div class="col-md-2 title">产品价格</div>
								<div class="col-md-4 data">
									<div class="input-group">
										<span class="input-group-addon">¥</span>
										<input type="text" class="form-control" v-model="product.productPrice" :readonly="readState?false:'readonly'">
									</div>
								</div>

								<div class="col-md-2 title">产品状态</div>
								<div class="col-md-4 data">
									<select class="form-control " style="width: 100%;" v-model="product.productStatusStr" :disabled="readState?false:'disabled'">
										<option >关闭</option>
										<option >启用</option>
									</select>
								</div>
								<div class="col-md-2 title rowHeight2x">其他信息</div>
								<div class="col-md-10 data rowHeight2x">
									<textarea class="form-control" rows="3" placeholder="其他信息" v-model="product.productDesc" :readonly="readState?false:'readonly'"></textarea>
								</div>

								<div class="col-md-2 title"></div>
								<div class="col-md-10 data text-center">
									<button type="button" id="submit_btn" class="btn bg-maroon" @click="submit">修改</button>
									<button type="button" class="btn bg-default" @click="goToList">返回</button>
								</div>
							</div>


						</div>
						<!--label显示的内容/-->
					</section>
					<!-- 正文区域 /-->
				</form>
			</div>
			<!-- @@close -->
			<!-- 内容区域 /-->


			<!-- 底部导航 -->
			<div id="footer"></div>
			<!-- 底部导航 /-->

		</div>
		</div>

		<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
		<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
		<script src="../js/include.js"></script>
		<script>
			$.widget.bridge('uibutton', $.ui.button);
		</script>
		<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="../plugins/raphael/raphael-min.js"></script>
		<script src="../plugins/morris/morris.min.js"></script>
		<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
		<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
		<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
		<script src="../plugins/knob/jquery.knob.js"></script>
		<script src="../plugins/daterangepicker/moment.min.js"></script>
		<script src="../plugins/daterangepicker/daterangepicker.js"></script>
		<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
		<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
		<script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
		<script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
		<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
		<script src="../plugins/fastclick/fastclick.js"></script>
		<script src="../plugins/iCheck/icheck.min.js"></script>
		<script src="../plugins/adminLTE/js/app.min.js"></script>
		<script src="../plugins/treeTable/jquery.treetable.js"></script>
		<script src="../plugins/select2/select2.full.min.js"></script>
		<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
		<script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
		<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
		<script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
		<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
		<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
		<script src="../plugins/ckeditor/ckeditor.js"></script>
		<script src="../plugins/input-mask/jquery.inputmask.js"></script>
		<script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
		<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
		<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="../plugins/chartjs/Chart.min.js"></script>
		<script src="../plugins/flot/jquery.flot.min.js"></script>
		<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
		<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
		<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
		<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
		<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
		<script src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
		<script src="../plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		<script src="../js/getParameter.js"></script>
		<script>
			// 设置激活菜单

			function setSidebarActive(tagUri) {
				var liObj = $("#" + tagUri);
				if (liObj.length > 0) {
					liObj.parent().parent().addClass("active");
					liObj.addClass("active");
				}
			}

			$(document).ready(function() {
				// datetime picker
				$('#dateTimePicker').datetimepicker({
					format: "yyyy-mm-dd hh:ii:ss",
					autoclose: true,
					todayBtn: true,
					language: 'zh-CN',
				});

				// 激活导航位置
				setSidebarActive("product-manager");
			});
		</script>
	</body>

	<script src="../js/config.js"></script>
	<script>
		$(function () {
			$("#dateTimePicker").datetimepicker().on("changeDate",function () {
				app.product.departureTime = $("#dateTimePicker").val();
			})
		})
		const app = new Vue({
			el:"#app",
			data:{
				readState:0,
				product:{
					id:"",
					productNum:"",
					productName:"",
					cityName:"",
					departureTime:"",
					productPrice:"",
					productDesc:"",
					productStatusStr:"关闭",
				}
			},
			methods:{
				submit(){
					if(app.readState===0){
						app.readState=1
						$("#submit_btn").html("提交")
					}else{
						if (app.product.productNum&&app.isNumber(app.product.productPrice)&&app.product.departureTime){
							axios.put(getServerUrl("product/update"),{
								product:app.product
							}).then(function (addRes) {
								if (addRes.data){
									alert("修改成功")
								}else{
									alert("修改失败")
								}
								app.loadProduct()
								app.readState=0
								$("#submit_btn").html("修改")
							})
						}
					}
				},
				loadProduct(){
					let id = getParameter("id")
					if (id==null){
						location.href="404.html"
					}else{
						this.product.id = id;
						axios.get(getServerUrl("product/find/"+id),{params:{

							}}).then(function (res) {
							app.product=res.data
						})
					}
				},
				isNumber(str){
					var regStr = /^[0-9]+.?[0-9]*/
					return regStr.test(str)||!str
				},
				goToList(){
					location.href="/pages/product-list.html"
				}
			},
			created(){
				this.loadProduct()
			}
		})
	</script>
</html>
<!---->
